<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/base.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/nav.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />
    <script type="text/javascript" src="../javascript/basic-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/plugins-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/nav-2.0.0.js"></script>
    <script type="text/javascript" src="lang_config.js"></script>
    <style>
        #wrap {
            width: 100%;
            height: 100%;
            padding: 30px 50px;
        }
       
    </style>
</head>

<body>
    <div id="wrap" class="k_box_size">

        <div style="height: 100%;width: 300px;float: left;">
            <div id="nav001" style="width: 100%;height: 100%;">

            </div>
        </div>
        <div style="height: 100%;width: auto;float: left;margin-left: 50px;width:50%">
            <div id="nav002">

            </div>
        </div>
    </div>
   
    <script type="text/javascript">
        var clickFn = function(e){
            console.log(e);
        };
        var children= [
                            {
                                text:'二级菜单1',
                                iconCls:'fa-lightbulb'
                            },
                            {
                                text:'二级菜单110',
                                iconCls:'fa-lightbulb',
                                children:[
                                {
                                    text:'确认删除',
                                    iconCls:' fa-scissors'
                                },    
                                {
                                    text:'退出菜单',
                                    iconCls:'fa-forward'
                                }]
                            },
                            {
                                text:'二级菜单2',
                                iconCls:' fa-print-1'
                            }
                        ];
        var navData = [
                    {
                        text:'系统菜单A',
                        iconCls:'fa-attach',
                        children:[
                            {
                                text:'二级菜单1',
                                iconCls:'fa-lightbulb',                                
                                click:clickFn,
                                children:children
                            },
                            {
                                text:'二级菜单2',
                                iconCls:' fa-print-1',
                                click:clickFn
                            }
                        ]
                    },
                    {
                        text:'菜单项目AA',
                        iconCls:'fa-attach',
                        actived:true
                    },
                    {
                        text:'菜单项目B',
                        iconCls:'fa-cog'
                    }, 
                    {
                        text:'菜单项目C',
                        iconCls:'fa-ok-circled',
                        children:[
                            {
                                text:'二级菜单1',
                                iconCls:'fa-lightbulb'
                            },
                            {
                                text:'二级菜单110',
                                iconCls:'fa-lightbulb',
                                children:[
                                {
                                    text:'确认删除',
                                    iconCls:' fa-scissors'
                                },    
                                {
                                    text:'退出菜单',
                                    iconCls:'fa-forward'
                                }]
                            },
                            {
                                text:'二级菜单2',
                                iconCls:' fa-print-1'
                            }
                        ]
                    },
                    {
                        text:'菜单项目D',
                        iconCls:'fa-layout'
                    },
                    {
                        text:'菜单项目E',
                        iconCls:'fa-share-2',
                        closed:true,
                        children:[
                            {
                                text:'二级菜单1',
                                iconCls:'fa-lightbulb'
                            },
                            {
                                text:'二级菜单2',
                                iconCls:' fa-print-1',
                                actived:true,
                            }
                        ]
                    },
                    {
                        text:'菜单项目9',
                        iconCls:'fa-cog'
                    }
                ];

        function pageLoaded() {
            new $B.Nav("#nav001",{
                style:'v' ,  //v 垂直风格，h水平风格
                datas:navData,
                backgroundColor:"#545C64", //整体背景色
                fontColor:"#fff",//图标字体颜色
                hoverColor:"#34393B", //鼠标移动上来的选项背景色
                activedColor:"#fff",//激活选项的背景色
                actFontColor:"#8E9503",//激活状态的图标字体颜色
                click:function(e){
                    console.log(e);
                }
            });
            new $B.Nav("#nav002",{
                style:'h' ,  //v 垂直风格，h水平风格               
                datas:navData,
                activedColor:'#005FFF',
                click:function(e){
                    console.log(e);
                }
            });
        };

        $B.DomUtils.onDomLoaded(function () {
            pageLoaded();
        });
    </script>
</body>

</html>